<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>就业指导 - 教育新闻网</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap-icons.css" rel="stylesheet">
    <style>
        .career-list {
            margin: 30px 0;
        }
        .career-item {
            padding: 25px;
            margin-bottom: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,.05);
            transition: all 0.3s;
        }
        .career-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,.1);
        }
        .career-title {
            color: #333;
            font-size: 20px;
            margin-bottom: 15px;
            text-decoration: none;
            font-weight: 500;
        }
        .career-title:hover {
            color: #0d6efd;
        }
        .career-meta {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
        }
        .career-meta span {
            margin-right: 20px;
        }
        .career-content {
            color: #666;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        .career-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        .welcome-section {
            background: linear-gradient(45deg, #FF512F, #DD2476);
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin-bottom: 30px;
        }
        .stats-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,.05);
        }
        .stats-number {
            font-size: 24px;
            font-weight: bold;
            color: #DD2476;
        }
        .stats-label {
            color: #666;
            margin-top: 5px;
        }
        .career-tips {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        .career-tips h4 {
            color: #DD2476;
            margin-bottom: 15px;
        }
        .career-tips ul {
            padding-left: 20px;
            margin-bottom: 0;
        }
        .career-tips li {
            margin-bottom: 10px;
            color: #666;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 引入头部 -->
    <jsp:include page="/user/common/header.jsp"/>
    
    <div class="container">
        <!-- 欢迎区域 -->
        <div class="welcome-section">
            <h2>就业指导服务</h2>
            <p class="mb-0">这里为您提供专业的就业指导和建议，帮助您规划职业生涯，提升就业竞争力。</p>
        </div>

        <!-- 就业小贴士 -->
        <div class="career-tips">
            <h4><i class="bi bi-lightbulb"></i> 就业小贴士</h4>
            <ul>
                <li>保持简历随时更新，突出自己的核心竞争力</li>
                <li>关注行业动态，了解目标公司的发展方向</li>
                <li>积极参加校园招聘会和行业交流活动</li>
                <li>培养良好的职业素养和沟通能力</li>
            </ul>
        </div>

        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-number">${totalCount}</div>
                    <div class="stats-label">发帖总数</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-number">${repliedCount}</div>
                    <div class="stats-label">已回复帖子</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-number">${waitingCount}</div>
                    <div class="stats-label">等待回复</div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3>我的就业咨询</h3>
            <button class="btn btn-primary" onclick="showAddCareerModal()">
                <i class="bi bi-plus-lg"></i> 发起咨询
            </button>
        </div>
        
        <div class="career-list">
            <c:forEach items="${careerList}" var="career">
                <div class="career-item">
                    <a href="${pageContext.request.contextPath}/user/career/detail?id=${career.post_id}" class="career-title">
                        ${career.title}
                    </a>
                    <div class="career-meta">
                        <span><i class="bi bi-clock"></i> <fmt:formatDate value="${career.create_time}" pattern="yyyy-MM-dd HH:mm"/></span>
                        <span><i class="bi bi-chat-dots"></i> ${career.reply_count}条回复</span>
                        <span><i class="bi bi-eye"></i> ${career.view_count}次浏览</span>
                    </div>
                    <div class="career-content">
                        ${career.content}
                    </div>
                    <div class="career-footer">
                        <span class="badge ${career.reply_count > 0 ? 'bg-success' : 'bg-warning'}">
                            ${career.reply_count > 0 ? '已回复' : '待回复'}
                        </span>
                        <a href="${pageContext.request.contextPath}/user/career/detail?id=${career.post_id}" class="btn btn-outline-primary btn-sm">
                            查看详情
                        </a>
                    </div>
                </div>
            </c:forEach>

            <c:if test="${empty careerList}">
                <div class="text-center py-5">

                    <p class="text-muted mt-3">暂无就业咨询记录，点击右上角发起咨询</p>
                </div>
            </c:if>
        </div>
        
        <!-- 分页 -->
        <c:if test="${totalPages > 1}">
            <nav>
                <ul class="pagination justify-content-center">
                    <li class="page-item ${currentPage == 1 ? 'disabled' : ''}">
                        <a class="page-link" href="${pageContext.request.contextPath}/user/career?page=${currentPage - 1}">上一页</a>
                    </li>
                    
                    <c:forEach begin="1" end="${totalPages}" var="i">
                        <li class="page-item ${currentPage == i ? 'active' : ''}">
                            <a class="page-link" href="${pageContext.request.contextPath}/user/career?page=${i}">${i}</a>
                        </li>
                    </c:forEach>
                    
                    <li class="page-item ${currentPage == totalPages ? 'disabled' : ''}">
                        <a class="page-link" href="${pageContext.request.contextPath}/user/career?page=${currentPage + 1}">下一页</a>
                    </li>
                </ul>
            </nav>
        </c:if>
    </div>
    
    <!-- 发起就业咨询模态框 -->
    <div class="modal fade" id="addCareerModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">发起就业咨询</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addCareerForm">
                        <div class="mb-3">
                            <label class="form-label">咨询主题</label>
                            <input type="text" class="form-control" name="title" required 
                                placeholder="请输入咨询主题，如：关于互联网行业就业方向的咨询">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">详细描述</label>
                            <textarea class="form-control" name="content" rows="6" required
                                placeholder="请详细描述您的就业困惑或需求，包括：&#10;1. 您感兴趣的行业或职位&#10;2. 目前遇到的具体问题&#10;3. 希望得到怎样的建议"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitCareer()">发布咨询</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入底部 -->
    <jsp:include page="/user/common/footer.jsp"/>
    
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
    <script>
        let addCareerModal;
        
        // 页面加载完成后初始化模态框
        document.addEventListener('DOMContentLoaded', function() {
            addCareerModal = new bootstrap.Modal(document.getElementById('addCareerModal'));
        });
        
        // 显示发起咨询模态框
        function showAddCareerModal() {
            <c:choose>
                <c:when test="${empty sessionScope.user}">
                    alert('请先登录后再发起咨询');
                    window.location.href = '${pageContext.request.contextPath}/user/login.jsp';
                </c:when>
                <c:otherwise>
                    addCareerModal.show();
                </c:otherwise>
            </c:choose>
        }
        
        // 提交咨询
        function submitCareer() {
            const form = document.getElementById('addCareerForm');
            const formData = new FormData(form);
            
            fetch('${pageContext.request.contextPath}/user/career/add', {
                method: 'POST',
                body: new URLSearchParams(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('发布失败，请稍后重试');
            });
        }
    </script>
</body>
</html> 